<template>
  <!-- <div class="box" @scroll="handleScroll"> -->
  <div class="box">
    <van-sticky>
      <div style="background-color: #1baeae">
        <van-row style="display: flex; align-items: center">
          <van-col span="2" offset="1">
            <van-icon
              ref="clify"
              name="wap-nav"
              size="20"
              color="#ffffff"
              @click="goto('./classify')"
            />
          </van-col>
          <van-col span="20">
            <van-search
              shape="round"
              background="transparent"
              disabled
              label="地址"
              placeholder="山河无恙。人间皆安"
              @click="goto(`./search?from=home`)"
            >
              <template #label
                ><span style="color: #1baeae; font-weight: 700; font-size: 18px"
                  >新峰商城</span
                >
              </template>
              <template #left-icon>
                <span style="font-size: 18px">|</span></template
              >
            </van-search>
          </van-col>
          <van-col span="3" style="color: #ffffff" @click="isLogin">
            <span ref="denl" v-if="!token">登录</span>
            <van-icon v-else name="user-o" size="20" />
          </van-col>
        </van-row>
      </div>
    </van-sticky>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="cornflowerblue"
    >
      <van-swipe-item v-for="(item, idx) in data.carousels" :key="idx">
        <van-image
          width="100%"
          height="100"
          fit="cover"
          :src="item.carouselUrl"
        />
      </van-swipe-item>
    </van-swipe>
   


    <div class="category-list">
      <div v-for="item in categoryList" v-bind:key="item.categoryId">
        <img :src="item.imgUrl" />
        <span>{{ item.name }}</span>
      </div>
    </div>

    <div class="gds">
      <div>
        <h4>---- 新品上线 ----</h4>
        <van-grid :column-num="2" :gutter="1">
          <van-grid-item
            v-for="(item, idx) in data.newGoodses"
            :key="idx"
            @click="goodsdeail(item.goodsId)"
          >
            <template #icon>
              <van-image
                width="100%"
                height="100"
                fit="cover"
                :src="item.goodsCoverImg"
              />
            </template>
            <template #text>
              <p class="goodsN">{{ item.goodsName }}</p>
              <p class="pri">￥{{ item.sellingPrice }}</p>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <div>
        <h4>---- 热门商品 ----</h4>
        <van-grid :column-num="2" :gutter="1">
          <van-grid-item
            v-for="(item, idx) in data.hotGoodses"
            :key="idx"
            @click="goodsdeail(item.goodsId)"
          >
            <template #icon>
              <van-image
                width="100%"
                height="100"
                fit="cover"
                :src="Ul + item.goodsCoverImg"
              />
            </template>
            <template #text>
              <p class="goodsN">{{ item.goodsName }}</p>
              <p class="pri">￥{{ item.sellingPrice }}</p>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <div>
        <h4>---- 最新推荐 ----</h4>
        <van-grid :column-num="2" :gutter="1">
          <van-grid-item
            v-for="(item, idx) in data.recommendGoodses"
            :key="idx"
            @click="goodsdeail(item.goodsId)"
          >
            <template #icon>
              <van-image
                width="100%"
                height="100"
                fit="cover"
                :src="Ul + item.goodsCoverImg"
              />
            </template>
            <template #text>
              <p class="goodsN">{{ item.goodsName }}</p>
              <p class="pri">￥{{ item.sellingPrice }}</p>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const token = localStorage.getItem("token");
    return {
      // 首页数据
      data: "",
      token,
      categoryList: [
        {
          name: "新蜂超市",
          imgUrl: "//s.weituibao.com/1583585285461/cs.png",
          categoryId: 100001,
        },
        {
          name: "新蜂服饰",
          imgUrl: "//s.weituibao.com/1583585285468/fs.png",
          categoryId: 100003,
        },
        {
          name: "全球购",
          imgUrl: "//s.weituibao.com/1583585285470/qq.png",
          categoryId: 100002,
        },
        {
          name: "新蜂生鲜",
          imgUrl: "//s.weituibao.com/1583585285472/sx.png",
          categoryId: 100004,
        },
        {
          name: "新蜂到家",
          imgUrl: "//s.weituibao.com/1583585285467/dj.png",
          categoryId: 100005,
        },
        {
          name: "充值缴费",
          imgUrl: "//s.weituibao.com/1583585285465/cz.png",
          categoryId: 100006,
        },
        {
          name: "9.9元拼",
          imgUrl: "//s.weituibao.com/1583585285469/pt.png",
          categoryId: 100007,
        },
        {
          name: "领劵",
          imgUrl: "//s.weituibao.com/1583585285468/juan.png",
          categoryId: 100008,
        },
        {
          name: "省钱",
          imgUrl: "//s.weituibao.com/1583585285471/sq.png",
          categoryId: 100009,
        },
        {
          name: "全部",
          imgUrl: "//s.weituibao.com/1583585285470/qb.png",
          categoryId: 100010,
        },
      ],
    };
  },
  mounted() {},
  created() {
    // 监听滚动事件
    this.$axios.get("/index-infos").then((data) => {
      // data:为服务器传回的数据
      //轮播图模块 "carousels"
      // 热门商品"hotGoodses":
      //新品上线 "newGoodses":
      // 最新推荐recommendGoodses
      // console.log(data);
      this.data = data.data;

    });
  },
  methods: {
    goto(url) {
      this.$router.push(url);
    },
    goodsdeail(id) {
      this.$router.push("/goods/" + id);
    },
    isLogin() {
      if (this.token) {
        this.goto("/mine");
      } else {
        this.goto("/login");
      }
    },
  },
  computed: {
    Ul() {
      return "http://backend-api-01.newbee.ltd";
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: rgba(169, 169, 169, 0.068);
}
h4 {
  font-weight: 400;
  width: 100%;
  font-size: 16px;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.goodsN {
  position: sticky;
  font-size: 14px;
}
.gds {
  padding-bottom: 50px;
}
.my-swipe {
  margin-top: 20px;
}
.pri {
  color: crimson;
}
.category-list {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 13px;
  div {
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    img {
      width: 40px;
      height: 40px;
      margin: 13px auto 8px auto;
    }
  }
}
</style>

